/* 全局样式重置，简单清除默认边距和设置盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "微软雅黑", sans-serif; /* 设置字体 */
  background-color: #f4f4f4; /* 页面背景色 */
  line-height: 1.6; /* 设置行高，让文本更易读 */
}

header {
  background-color: #333; /* 头部背景色 */
  color: white; /* 文字颜色 */
  text-align: center; /* 文字居中 */
  padding: 20px; /* 内边距 */
}

main {
  padding: 20px; /* 主内容区域内边距 */
  max-width: 800px; /* 限制主内容区域最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

article {
  background-color: white; /* 文章区域背景色 */
  padding: 20px; /* 内边距 */
  margin-bottom: 20px; /* 与下方元素的间距 */
  border-radius: 5px; /* 圆角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h2 {
  color: #333; /* 文章标题颜色 */
  margin-bottom: 10px; /* 与下方段落间距 */
}
/* 之前的样式保持不变，新增以下内容 */
.article-tag {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  margin-right: 5px;
  font-size: 0.8em;
}

.read-count {
  color: #666;
  font-size: 0.8em;
}

/* 打开 src/style.css，添加以下样式 */
.comments-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.comment-form {
  margin-bottom: 15px;
}

.comment-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.comment-form button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 4px;
}

.comment-form button:hover {
  background-color: #0056b3;
}

.comment-item {
  background-color: #f9f9f9;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.comment-date {
  display: block;
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}